<template>
    <view class="withdrawal tn-safe-area-inset-bottom">
        <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">提现申请</tn-navbar>

        <view class="withdrawal-content">
            <view class="withdrawal-content-item desc">
                最低提现金额100元
            </view>
            <view class="withdrawal-content-item input tn-flex-row">
                <text>￥</text><input type="number" @input="withdrawalPriceChange" focus v-model="withdrawalPrice"
                    input-align="left" />

            </view>
            <view class="withdrawal-content-item balance">
                可用余额{{ userBalance }}元
            </view>
            <view class="withdrawal-content-item error-info">
                {{ errorMsg }}
            </view>
        </view>
        <view class="withdrawal-tools tn-bg-main" @click="submitWithdrawal">
            提交申请
        </view>
    </view>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnInput from "@/tuniao-ui/components/tn-input/src/Input.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import { useUserStore } from "@/tuniao-ui/store/user";
import { navLogin, navBack } from "@/tuniao-ui/utils";
import { getBalance } from "@/api/user";
import { saveWithdrawal } from "@/api/withdrawal";
import { ResultEnum } from "@/enums/httpEnum";
import { loading, toast } from "@/tuniao-ui/utils/messageUtils";
const userStore = useUserStore();
const isLogin = ref<boolean>(false);
const userBalance = ref(0);
const withdrawalPrice = ref(); // 提现金额

const errorMsg = ref("");

// 提现金额输入变化事件
function withdrawalPriceChange() {

    if (withdrawalPrice.value > userBalance.value) {
        errorMsg.value = "提现金额超出可提现金额";
    } else {
        errorMsg.value = "";
    }
}

async function submitWithdrawal() {


    loading({ mask: true, title: "加载中" })

    let response = await saveWithdrawal({ price: withdrawalPrice.value });
    console.log(response);
    const { message: msg, code } = response;

    if (code === ResultEnum.SUCCESS) {
        toast({ title: msg, icon: 'success' });
        navBack();
    } else {
        toast({ title: msg, icon: 'error' });
    }

}

onMounted(() => {
    isLogin.value = userStore.isLogin();
    if (isLogin.value) {
        // 获取余额
        getBalance().then((res) => {
            if (res.code === ResultEnum.SUCCESS) {
                userBalance.value = res.result;
            }
        })
    } else {
        navLogin();
    }

});
</script>
  
<style lang="scss" scoped>
body {
    background-color: #fff;
}

.withdrawal {

    &-content {
        padding: 20rpx;

        &-item {
            margin-top: 30rpx;
            color: #666;
        }

        .error-info {
            color: #f00;
        }

        .input {
            font-size: 50rpx;
            height: 100rpx;
            justify-content: center;
            align-items: center;
            border-bottom: 2rpx solid #e8e8e8;

            input {
                margin-left: 30rpx;
                width: 100%;
                font-size: 40rpx;
            }
        }
    }

    &-tools {
        height: 100rpx;
        padding: 0 20rpx;
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
    }

}
</style>
  